<template>
  <div class="author-main pos-relative">
    <div class="flex flex-col flex-justify-center flex-items-center z-999">
      <div class="author-box">
        <el-image
          class="author-image"
          fit="cover"
          :src="avatar"
        >
          <template #error>
            <el-icon class="text-[--el-color-primary]" :size="180">
              <CircleCloseFilled />
            </el-icon>
          </template>
        </el-image>
      </div>
      <div class="m-t-18px text-26px chroma-text">欢迎来到怪我帅的小屋</div>
      <div class="m-t-6px text-20px chroma-text">正在加载系统资源...</div>
    </div>
    <div class="pos-absolute inset-0 blur-lg bg-gradient-to-br from-transparent via-[--el-color-primary-light-7]/36 to-[--el-color-primary-light-7]/100"></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const avatar = ref("https://pic3.zhimg.com/80/v2-cb928dab1abe5231fb87db69498de128_720w.webp");
</script>

<style scoped>
.author-main {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.author-box {
  position: relative;
  width: 195px;
  height: 195px;
  background: rgba(253, 253, 253, 0.8);
  @apply dark:bg-[rgba(0,0,0,0.3)] hover:border-[--el-color-primary];
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--el-color-primary-light-5);
}

.author-box::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  background-image: conic-gradient(transparent, transparent, transparent, #8758ff);
  animation: animate 4s linear infinite;
  animation-delay: -2s;
}

.author-image {
  border-radius: 50%;
  overflow: hidden;
  width: 180px;
  height: 180px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.67);
}

.author-box::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  background-image: conic-gradient(transparent, transparent, transparent, #06a6f0);
  animation: animate 4s linear infinite;
}

@keyframes animate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

/** 彩色字体 */
.chroma-text {
    background-image: -o-linear-gradient(225deg, #418AE0, #56A0D8, #DC8BC3, #56A0D8, #418AE0, #56A0D8, #DC8BC3, #56A0D8, #418AE0);
    background-image: linear-gradient(-135deg, #418AE0, #56A0D8, #DC8BC3, #56A0D8, #418AE0, #56A0D8, #DC8BC3, #56A0D8, #418AE0);
    background-image: -ms-linear-gradient(-135deg, #418AE0, #56A0D8, #DC8BC3, #56A0D8, #418AE0, #56A0D8, #DC8BC3, #56A0D8, #418AE0);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-size: 200% 100%;
    -webkit-animation: masked-animation 3s infinite linear;
    animation: masked-animation 3s infinite linear;
}

@keyframes masked-animation {
  0% {
      background-position: 0 -100%;
  }

  100% {
      background-position: -100% 0;
  }
}
</style>
